import { Shape, Node, ObjectExt } from '@antv/x6';

export const END_CIRCLE_NAME = 'end-circle';

if (Node.registry.exist(END_CIRCLE_NAME)) {
  Node.registry.unregister(END_CIRCLE_NAME);
}

Shape.Circle.define({
  shape: END_CIRCLE_NAME,
  width: 30, // 默认宽度
  height: 30, // 默认高度
  attrs: {
    body: {
      strokeWidth: 1,
      fill: '#ff7875',
      stroke: '#888',
    },
    label: {
      fill: '#fff',
      fontSize: 12,
      // refX: 10, // x 轴偏移，类似 css 中的 margin-left
      // textAnchor: 'left', // 左对齐
    },
  },

  // 通过钩子将 label 应用到 'attrs/text/text' 属性上
  propHooks(metadata) {
    const { props, ...others } = metadata;
    if (props) {
      if (props.name) ObjectExt.setByPath(others, 'attrs/label/text', props.name);
    }
    return others;
  },

  // 链接桩定义
  ports: {
    groups: {
      top: {
        position: 'top',
        label: {
          position: 'top',
        },
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      right: {
        position: 'right',
        label: {
          position: 'right',
        },
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        label: {
          position: 'bottom',
        },
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        label: {
          position: 'left',
        },
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        id: 'port1',
        group: 'top',
      },
      {
        id: 'port2',
        group: 'right',
      },
      {
        id: 'port3',
        group: 'bottom',
      },
      {
        id: 'port4',
        group: 'left',
      },
    ],
  },
});
